<link href="__static__/layui/css/layui.css" rel="stylesheet">

<link href="__static__/layui/css/background.css" rel="stylesheet">

<script type="text/javascript" src="__static__/layui/layui.js"></script>
<script type="text/javascript" src="__static__/lib/layer/2.4/layer.js"></script>
<script src="__static__/home/js/jquery.min.js"></script>
<script src="__static__/home/js/jquery.easyfader.min.js"></script>
<style>
/* 下拉按钮样式 */
.dropbtn {
    background-color: #333;
    color: white;
    padding: 12px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* 容器 <div> - 需要定位下拉内容 */
.dropdown {
    position: relative;
    display: inline-block;
}

/* 下拉内容 (默认隐藏) */
.dropdown-content {

    text-align: center;
    margin-left: 10px;
    /*width: auto;*/
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    /*min-width: 120px;*/
    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.2);
}

/* 下拉菜单的链接 */
.dropdown-content a {
    width: 120px;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: inline-block;
}

/* 鼠标移上去后修改下拉菜单链接颜色 */
.dropdown-content a:hover {
  /*background-color: black*/
}

/* 在鼠标移上去后显示下拉菜单 */
.dropdown:hover .dropdown-content {
    display: block;
}

/* 当下拉内容显示后修改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {
    /*background-color: black;*/
}
</style>

<div class="topnav">
    <nav>
        <ul>
            <li><a href="{:url('index/index')}">网站首页</a></li>
            <li><a href="{:url('cate/index' , array('type' => 1))}">历史分类</a></li>
            <li><a href="{:url('cate/pic_cate')}">图文推荐</a></li>
            <div class="dropdown">
              <a href="{:url('cate/index' , array('type' => 2))}" class="dropbtn">地域展览</a>
              <div class="dropdown-content">
               {volist name='cateresz' id='cateresz' offset="0" length='10'}
               <a href="{:url('cate/index', array('type' => $cateresz.typez, 'cid' => $cateresz.id))}">{$cateresz.catename}</a>
               {/volist}
              </div>
            </div>
            <li><a href="{:url('index/messages/mess_user')}">留言</a></li>
            <li><a href="{:url('admin/login/index')}">管理员</a></li>
            <li>
                <!-- {$Request.session.name} -->
                {if condition="$Request.session.username neq ''"}
                <div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;display: inline;">
                <button onclick="user()" data-type="auto" class="layui-btn layui-btn-normal" style="background-color: rgb(51, 51, 51);">{$Request.session.username}</button>
            </div>
                <!-- <a  href="{:url('mine/index')}">{$Request.session.username}</a> -->
                {else /}
                <a  href="{:url('index/admin/login')}">登录</a>
                {/if}
            </li>
        </ul>
    </nav>
</div>
<script>

  function user(){
    window.location.href = "{:url('index/user/index', array('id' => $Request.session.userid))}"
  }

    // function user_edit(){
    //     window.open ('page.html', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no')
    // }

    layui.use('layer', function(){ //独立版的layer无需执行这一句
      var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

      //触发事件
      var active = {
        setTop: function(){
          var that = this;
          //多窗口模式，层叠置顶
          layer.open({
            type: 2 //此处以iframe举例
            ,title: '当你选择该窗体时，即会在最顶端'
            ,area: ['400px', '360px']
            ,shade: 0
            ,maxmin: true
            ,offset: [ //为了演示，随机坐标
              Math.random()*($(window).height()-300)
              ,Math.random()*($(window).width()-390)
            ]
            ,content: '//layer.layui.com/test/settop.html'
            ,btn: ['继续弹出', '全部关闭'] //只是为了演示
            ,yes: function(){
              $(that).click();
            }
            ,btn2: function(){
              layer.closeAll();
            }

            ,zIndex: layer.zIndex //重点1
            ,success: function(layero){
              layer.setTop(layero); //重点2
            }
          });
        }
        ,confirmTrans: function(){
          //配置一个透明的询问框
          layer.msg('大部分参数都是可以公用的<br>合理搭配，展示不一样的风格', {
            time: 20000, //20s后自动关闭
            btn: ['明白了', '知道了', '哦']
          });
        }
        ,notice: function(){
          //示范一个公告层
          layer.open({
            type: 1
            ,title: '用户信息修改' //不显示标题栏
            ,closeBtn: false
            ,area: '600px;'
            ,shade: 0.8
            ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
            ,btn: ['火速围观', '残忍拒绝']
            ,btnAlign: 'c'
            ,moveType: 1 //拖拽模式，0或者1
            ,content: '<div style="padding: 50px; line-height: 22px; background-color: #FFFFFF; black: #fff; font-weight: 300;">你知道吗？亲！<br>layer ≠ layui<br><br>layer只是作为Layui的一个弹层模块，由于其用户基数较大，所以常常会有人以为layui是layerui<br><br>layer虽然已被 Layui 收编为内置的弹层模块，但仍然会作为一个独立组件全力维护、升级。<br><br>我们此后的征途是星辰大海 ^_^</div>'
            ,success: function(layero){
              var btn = layero.find('.layui-layer-btn');
              btn.find('.layui-layer-btn0').attr({
                href: 'http://www.layui.com/'
                ,target: '_blank'
              });
            }
          });
        }
        ,offset: function(othis){
          var type = othis.data('type')
          ,text = othis.text();

          layer.open({
            type: 1
            ,title: '用户信息修改' //不显示标题栏
            ,area: '500px;'
            ,offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
            ,id: 'layerDemo'+type //防止重复弹出
            // ,content: '<div style="padding: 200px 100px;">'+ text +'</div>'
            ,content:'<div style="padding: 40px 10px;height:120px;margin-left:11%;" class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-block"> <input id="name" style="width:200px;" type="text" name="title" lay-verify="title" autocomplete="off" class="layui-input" value="{$Request.session.username}">  </div> <label class="layui-form-label"  style="margin-top: 20px;">密码</label> <div class="layui-input-block"> <input id="password" style="width:200px;margin-top: 20px;" type="password" name="password" lay-verify="title" autocomplete="off" class="layui-input">  </div> <a href="{:url("index/admin/logout")}"><button  style="position: absolute;right:20px;bottom:4px;" type="button" class="layui-btn layui-btn-primary">退出登录</button></a>  </div> '
            ,btn: ['确认修改', '取消操作']
            ,btnAlign: 'c' //按钮居中
            ,shade: 0 //不显示遮罩
            ,yes: function(){
                var id = {$Request.session.userid};
                var name = $("#name").val();
                var password = $("#password").val();
                // alert(id);
                // 发送请求
                $.ajax({
                type: 'post',
                url: "{:url('index/admin/edit')}",
                data: {name: name, password: password, id: id},
                dataType: 'json',
                success: function (res) {
                    if (res.code == 1){
                        layer.msg(res.msg, {icon: 1, time: 1000});
                        setTimeout(function () {
                            window.location.href="{:url('admin/login')}";
                        }, 1500)
                    }else {
                        layer.msg(res.msg);
                    }

                },
                error: function (res) {
                    console.log(res.msg);
                },
             });

            }
          });
        }
      };

      $('#layerDemo .layui-btn').on('click', function(){
        var othis = $(this), method = othis.data('method');
        active[method] ? active[method].call(this, othis) : '';
      });

    });
    </script>
